<script setup>
import { ref, onMounted } from 'vue'
import { userGetListService, userDeleteService } from '@/api/user.js'

const errorHandler = () => true

const userList = ref()
const tableData = ref()
const loading = ref(true)
onMounted(async () => {
  loading.value = true
  const res = await userGetListService(1)
  userList.value = res.data.data
  tableData.value = userList.value.rows
  loading.value = false
})
// 分页渲染
const handleCurrentChange = async (val) => {
  console.log('当前页: ' + val)
  loading.value = true
  const res = await userGetListService(val)
  userList.value = res.data.data
  tableData.value = userList.value.rows
  loading.value = false
}

// 删除用户
const onDelNews = async (row) => {
  // 提示用户是否要删除
  await ElMessageBox.confirm('此操作将永久封禁该用户, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await userDeleteService(row.userId)
  ElMessage.success('封禁成功')
  //重新渲染
  handleCurrentChange(userList.value.currentPages)
}
</script>

<template>
  <AdminNewsPage title="用户资料">
    <!-- 搜索区域 -->
    <el-form inline>
      <el-form-item label="用户昵称:">
        <el-input placeholder="请输入用户昵称"> </el-input>
      </el-form-item>
      <el-form-item label="身份:">
        <el-select>
          <el-option label="用户" value="用户"></el-option>
          <el-option label="管理员" value="管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定邮箱:">
        <el-input placeholder="请输入用户绑定的邮箱"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 新闻列表 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" max-height="565">
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="avatar" label="头像" width="90">
        <template #default="{ row }">
          <el-avatar :src="row.avatar" @error="errorHandler">
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          /></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="email" label="绑定邮箱" width="250"></el-table-column>
      <el-table-column prop="userType" label="身份">
        <template #default="{ row }">
          <div v-if="row.userType === 2">管理员</div>
          <div v-else>用户</div>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别" width="90"></el-table-column>
      <el-table-column
        prop="loginTime"
        label="上一次登录时间"
        width="200"
      ></el-table-column>
      <el-table-column prop="registerTime" label="加入时间" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <!-- row 就是 channelList 的一项， $index 下标 -->
        <template #default="{ row }">
          <el-button circle plain type="danger" @click="onDelNews(row)">封</el-button>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-if="userList"
      :page-size="1"
      :pager-count="10"
      layout="total, prev, pager, next, jumper"
      :total="userList.pageNumber"
      @current-change="handleCurrentChange"
      style="margin: 30px; justify-content: flex-end"
    />

    <!-- 编辑抽屉 -->
    <EditDrawer ref="articleEditRef"></EditDrawer>
  </AdminNewsPage>
</template>

<style scoped></style>
